<template>
	<view class="wrap">
		<view class="title">
			<view class="title-label">标题：</view>
			<input v-model="title" type="text" placeholder="请输入标题" placeholder-class="app_phc">
		</view>
		<view class="img">
			<view class="img-item" v-for="(item, index) in imgList" :key="index">
				<image class="img-item_clear" src="../../static/images/icon-clear.png" mode=""
					@click="showImgDelFlag=true,delIndex=index"></image>
				<image class="img-item_goods" :src="item.img_path" mode="" @click="previewImg(index)"></image>
			</view>
			<view class="img-add" @click="addImg" v-if="imgList.length < 9">
				<image src="../../static/images/icon-camera.png" mode=""></image>
				<text>添加图片</text>
			</view>
		</view>
		<view class="content">
			<textarea v-model="content" placeholder="请输入给大家分享些什么" placeholder-class="app_phc" />
		</view>
		<view class="btn">
			<g-btn title="发布" @click="showPublishFlag = true"></g-btn>
		</view>
		<u-modal v-model="showImgDelFlag" content="是否删除图片？" @confirm="onRemoveImgItem" show-cancel-button></u-modal>
		<u-modal v-model="showPublishFlag" content="确定发布？" @confirm="onPublishTap" show-cancel-button></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgList: [],
				showImgDelFlag: false,
				delIndex: 0,
				title: '',
				content: '',
				showPublishFlag: false
			}
		},
		onLoad(options) {
			this.$store.dispatch('updateUserInfo')
			const imgList = uni.getStorageSync('hotStyleImgList')
			// imgList && (this.imgList = imgList);
			this.imgList = imgList || []
		},
		onUnload() {

		},
		methods: {
			async checkParams() {
				try {
					if (!this.title) {
						return Promise.reject('请输入标题')
					}
					if (!this.content) {
						return Promise.reject('请输入内容')
					}
					if (this.imgList.length == 0) {
						return Promise.reject('请上传图片')
					}
					this.imgList = await Promise.all(this.imgList.map(async item => {
						const img_uploadPath = await this.uploadImg(item.img_path)
						return Promise.resolve({
							...item,
							img_uploadPath
						})
					}))
					// 还要先把图片上传到服务器
					const nethotJsonArray = this.imgList.map(item => {
						let obj = {
							url: item.img_uploadPath,
						}
						const points = item.goods.map(val => {
							return {
								point: `${val.x},${val.y}`,
								products: val.id
							}
						})
						return {
							url: item.img_uploadPath,
							points
						}
					})

					return Promise.resolve({
						createUser: this.gUserInfo.userId,
						describe: this.content,
						title: this.title,
						nethotJsonArray: JSON.stringify(nethotJsonArray)
					})
				} catch (e) {
					//TODO handle the exception
					return Promise.reject(e)
				}
			},
			uploadImg(filePath) {
				return new Promise((resolve, reject) => {
					uni.uploadFile({
						url: `${this.$g_config.requestUrl}/api/common/common/upload`,
						filePath,
						name: 'file',
						success: (uploadFileRes) => {
							if(uploadFileRes?.data) {
								const data = JSON.parse(uploadFileRes.data)
								resolve(data.fileName)
							}
						}
					});
				})
			},
			async onPublishTap() {
				try {
					const params = await this.checkParams()
					console.log(params);
					this.$g_api.productSaveNethot(params).then(({
						data
					}) => {
						uni.showToast({
							title: '发布成功',
							icon: 'none'
						})
						uni.removeStorageSync('hotStyleImgList')
						uni.$emit('update-hotStyleList')
						uni.navigateBack({
							delta: 2
						})
					})
				} catch (e) {
					//TODO handle the exception
					uni.showToast({
						title: e,
						icon: 'none'
					})
				}
			},
			onRemoveImgItem() {
				this.imgList.splice(this.delIndex, 1)
				uni.setStorageSync('hotStyleImgList', this.imgList)
			},
			previewImg(index) {
				uni.$emit('update-hotstyleSwiperIndex', index)
				uni.navigateBack()
			},
			addImg() {
				const count = 9 - this.imgList.length
				uni.chooseImage({
					count,
					success: (res) => {
						console.log(res);
						const tempFilePaths = res.tempFilePaths
						uni.$emit('update-hotstyleAddGoodsList', tempFilePaths)
						uni.navigateBack()
					}
				})

			}
		}
	}
</script>
<style>
	page {
		background-color: #fff;
	}
</style>
<style scoped lang="scss">
	.wrap {}

	.title {
		height: 60rpx;
		padding: 0 30rpx;
		display: flex;
		align-items: center;

		input {
			flex: 1;
			height: 60rpx;
		}
	}

	.title-label {
		line-height: 60rpx;
		flex-shrink: 0;
	}

	.img {
		padding: 30rpx 0 0rpx 30rpx;
		display: flex;
		flex-wrap: wrap;
		overflow: hidden;
	}

	.img-item {
		// display: inline-block;
		position: relative;
		width: 180rpx;
		height: 180rpx;
		margin-right: 40rpx;
		margin-bottom: 40rpx;
		font-size: 0;
	}

	.img-item_clear {
		position: absolute;
		top: -12rpx;
		right: -12rpx;
		width: 36rpx;
		height: 36rpx;
		z-index: 99;
	}

	.img-item_goods {
		width: 180rpx;
		height: 180rpx;
		border-radius: 10rpx;
		// background-color: skyblue;
	}

	.img-add {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		width: 180rpx;
		height: 180rpx;
		border-radius: 10rpx;
		font-size: 0;
		background-color: #f2f2f2;

		image {
			width: 60rpx;
			height: 60rpx;
		}

		text {
			font-size: 24rpx;
			color: #ccc;
		}
	}

	.content {
		textarea {
			width: 750rpx;
			height: 400rpx;
			padding: 30rpx;
			box-sizing: border-box;
			// border: 1px solid #f1f1f1;
		}
	}

	.btn {
		position: fixed;
		bottom: 50rpx;
		left: 30rpx;
	}
</style>
